<template>
  <div class="list">
    <div>
      <van-search
        v-model="phone"
        class="search"
        shape="round"
        show-action
        placeholder="请输入手机号"
        @search="onSearch"
      >
        <template #action>
          <div class="c-red fz-14" @click="onSearch">搜索</div>
        </template>
      </van-search>
    </div>
    
    <div class="invoice-list">
      <template v-if="list && list.length">
        <invoiceItem v-for="(item, i) in list" :key="i" :invoiceItem="item"></invoiceItem>
      </template>
      <van-empty v-else image="search" description="无开票记录" />
    </div>
  </div>
</template>

<script>
import { getLocations, setLocations, setPhoneTokenMap } from '@/projects/invoice/utils/storage'
import { Toast } from 'vant'
import invoiceItem from './invoiceItem.vue';
import { listOrderInvoice } from "@/projects/invoice/api/home/index";
export default {
  data() {
    const orderHistoryPhone = getLocations('orderHistoryPhone');
    return {
      loading: false,
      finished: false,
      list: [],
      phone: orderHistoryPhone || ""
    };
  },
  methods: {
    onSearch() {
      if (!this.phone) {
        Toast.fail("请输入手机号！");
        return;
      }
      setLocations('orderHistoryPhone', this.phone)
      const phoneTokenMap = getLocations('phoneTokenMap') || {}
      if (phoneTokenMap[this.phone]) {
        const params = {
          phone: this.phone,
          phoneToken: phoneTokenMap[this.phone],
        }
        listOrderInvoice(params).then(res => {
          if (res.code == 200) {
            Toast.success("查询成功！");
            this.list = res.data || [];
          } else {
            const phoneTokenMap = {
              [this.phone]: '',
            }
            setPhoneTokenMap(phoneTokenMap)
            this.$emit('goVerify')
          }
        })
      } else {
        this.$emit('goVerify')
      }
    }
  },
  mounted() {
    this.onSearch()
  },
  components: {
    invoiceItem
  }
};
</script>
<style lang="scss" scoped>
.list {
  height: 100%;
  .invoice-list {
    height: calc(100% - 60px);
    overflow: auto;
  }
}
.go-order {
  color: #4387fb;
}
</style>